<template>
  <div class="wrap ">
    <button>编辑</button>
    <table v-if="true">
      <tr>
        <th width='85%'></th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in 12" :key="index">
        <td></td>
        <td>
          <img src="../img/purchase_icon.png" alt="">
          <span>采购</span>
        </td>
      </tr>
    </table>

    <table v-if="false">
      <tr>
        <th>品名</th>
        <th>纱支</th>
        <th>原料成分</th>
        <th>价格(元/kg)</th>
        <th>供应商</th>
        <th>发布时间</th>
        <th>操作</th>
      </tr>
      <tr v-for="(item, index) in [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]" :key="index">
        <td>24S 纯棉普梳 环锭纺</td>
        <td>24s</td>
        <td>纯棉</td>
        <td> 24500.00 </td>
        <td>浙江中鼎</td>
        <td>2018-05-31</td>
        <td>
          <img src="../img/purchase_icon.png" alt="">
          <span>采购</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
}
</script>

<style lang="scss" scoped>
@import '../../../scss/_var.scss';
.wrap {
  width: 615px;
  height: 503px;
  background: #fff;
  padding: 8px;
  position: relative;
  table {
    width: 100%;
    tr {
      th {
        color: #878787;
        padding-bottom: 10px;
        font-size: 14px;
      }
      td {
        padding: 9px 0;
        text-align: center;
        img {
          width: 20px;
          height: 20px;
          vertical-align: middle;
        }
        &:nth-of-type(1) {
          color: $btn-vendor;
        }
        &:nth-of-type(4) {
          color: $color-main;
        }
        &:nth-of-type(7) {
          color: #5EB0EA;
        }
      }
      &:nth-child(odd) {
        background: $bg-gray;
      }
      &:nth-of-type(1) {
        background: #fff;
        border-bottom: 1px solid $border-gray;
      }
    }
  }
}
button {
  width: 40px;
  height: 20px;
  border-radius: 10px;
  background: $color-main;
  position: absolute;
  top: 10px;
  right: 14px;
  color: #fff;
  font-size: 12px;
}
</style>


